<!--
 * @Descripttion: 图像裁剪组件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月24日17:05:43
 * @LastEditors: Xujianchen
 * @LastEditTime: 2023-03-18 13:04:21
 * @other: 代码完全开源，欢迎参考，也欢迎PR
-->

<template>
    <div class="sc-cropper">
        <div class="sc-cropper__img">
            <img :src="src" ref="img" />
        </div>
        <div class="sc-cropper__preview">
            <h4>{{ $t('图像预览') }}</h4>
            <div class="sc-cropper__preview__img" ref="preview"></div>
        </div>
    </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
    props: {
        src: { type: String, default: '' },
        compress: { type: Number, default: 1 },
        aspectRatio: { type: Number, default: NaN },
    },
    data() {
        return {
            crop: null,
        }
    },
    watch: {
        aspectRatio(val) {
            this.crop.setAspectRatio(val)
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.crop = new Cropper(this.$refs.img, {
                viewMode: 2,
                dragMode: 'move',
                responsive: false,
                aspectRatio: this.aspectRatio,
                preview: this.$refs.preview,
            })
        },
        setAspectRatio(aspectRatio) {
            this.crop.setAspectRatio(aspectRatio)
        },
        getCropData(cb, type = 'image/jpeg') {
            cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress))
        },
        getCropBlob(cb, type = 'image/jpeg') {
            this.crop.getCroppedCanvas().toBlob(
                (blob) => {
                    cb(blob)
                },
                type,
                this.compress,
            )
        },
        getCropFile(cb, fileName = 'fileName.jpg', type = 'image/jpeg') {
            this.crop.getCroppedCanvas().toBlob(
                (blob) => {
                    let file = new File([blob], fileName, { type: type })
                    cb(file)
                },
                type,
                this.compress,
            )
        },
    },
}
</script>

<style scoped>
.sc-cropper {
    height: 300px;
}

.sc-cropper__img {
    height: 100%;
    width: 400px;
    float: left;
    background: #ebeef5;
}

.sc-cropper__img img {
    display: none;
}

.sc-cropper__preview {
    width: 120px;
    margin-left: 20px;
    float: left;
}

.sc-cropper__preview h4 {
    font-weight: normal;
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 20px;
}

.sc-cropper__preview__img {
    overflow: hidden;
    width: 120px;
    height: 120px;
    border: 1px solid #ebeef5;
}
</style>